import React from 'react';
import { Modal, Button, message } from 'antd';
import { WeaLocaleProvider, WeaTools, WeaDialog, WeaTab, WeaRightMenu, WeaMoreButton, WeaSearchGroup, WeaFormItem, WeaInput, WeaTextarea, WeaBrowser } from 'ecCom';
import { WeaTableNew } from 'comsMobx';

const getLabel = WeaLocaleProvider.getLabel;
const { WeaTable, TableStore } = WeaTableNew;
const tableStore = new TableStore();

class Content_RankingList_SqlTemplateManage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      loading: false,
      title: '',
      creator: '',
      replaceDatas: [],
      showSearchAd: false,
      selectedRowKeys: [],
    };
  }

  render() {
    const { visible, loading, title, replaceDatas, showSearchAd } = this.state;

    const rowSelection = {
      onChange: (selectedRowKeys) => {
        this.setState({ selectedRowKeys: selectedRowKeys.slice() });
      },
    };

    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@dm9oog`}
        visible={visible}
        loading={loading}
        title={getLabel(388014, 'sql模板管理')}
        icon="icon-coms-portal"
        iconBgcolor="#1a57a0"
        style={{ width: 900, height: 600 }}
        buttons={this.getButtons()}
        onCancel={this.onCancel}
      >
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@rcgf8k`} datas={this.getRightMenus()}>
          <Edit ecId={`${this && this.props && this.props.ecId || ''}_Edit@afpvf4`} ref={(edit) => (this.edit = edit)} getSqlTemplates={this.getSqlTemplates} />
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@9cwe03`}
            datas={[]}
            searchType={['base', 'advanced']}
            searchsBaseValue={title}
            onSearch={this.getSqlTemplates}
            onSearchChange={(value) => this.setState({ title: value })}
            showSearchAd={showSearchAd}
            setShowSearchAd={(showSearchAd) => this.setState({ showSearchAd })}
            advanceHeight={69}
            searchsAd={
              <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ryuudz`}
                needTigger={false}
                showGroup={true}
                items={[
                  {
                    com: (
                      <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@dneqq2`} label={getLabel(33439, '名称')} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@lyoa5a`} value={title} onChange={(value) => this.setState({ title: value })} onEnterSearch={this.getSqlTemplates} />
                      </WeaFormItem>
                    ),
                    colSpan: 1,
                  },
                  {
                    com: (
                      <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@pv7oh5`} label={getLabel(882, '创建人')} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
                        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@pafrkv`}
                          title={getLabel(83496, '多人力资源')}
                          type={'17'}
                          isSingle={false}
                          hasAdvanceSerach={true}
                          replaceDatas={replaceDatas}
                          onChange={(ids, names, datas) => this.setState({ creator: ids, replaceDatas: datas })}
                        />
                      </WeaFormItem>
                    ),
                    colSpan: 1,
                  },
                ]}
              />
            }
            onAdSearch={this.getSqlTemplates}
            onAdReset={() => this.setState({ title: '', creator: '', replaceDatas: [] })}
            onAdCancel={() => this.setState({ showSearchAd: false })}
          />
          <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@vv6sa6`} comsWeaTableStore={tableStore} rowSelection={rowSelection} needScroll={true} onOperatesClick={this.onOperatesClick} scroll={{ y: 470 }} />
        </WeaRightMenu>
      </WeaDialog>
    );
  }

  getButtons = () => {
    const { selectedRowKeys: _keys } = this.state;

    const buttons = [];
    buttons.push(
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ujo23l`} type="primary" onClick={this.onAdd}>
        {getLabel(365, '新建')}
      </Button>
    );
    buttons.push(
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2zuyvy`} type="primary" disabled={!(_keys && _keys.length)} onClick={this.onBatchDelete}>
        {getLabel(32136, '批量删除')}
      </Button>
    );
    return buttons;
  };

  getRightMenus = () => {
    const { selectedRowKeys: _keys } = this.state;

    const rightMenus = [];
    rightMenus.push({ key: '1', icon: <i className="icon-coms-Add-to-o" />, content: getLabel(365, '新建'), onClick: this.onAdd });
    rightMenus.push({ key: '2', disabled: !(_keys && _keys.length), icon: <i className="icon-coms-Batch-delete" />, content: getLabel(32136, '批量删除'), onClick: this.onBatchDelete });
    return rightMenus;
  };

  onOperatesClick = (record, index, operate, flag) => {
    if (operate.index == '0') {
      this.edit.onShow(record.id);
    } else if (operate.index == '1') {
      this.onDelete(record.id);
    }
  };

  getSqlTemplates = () => {
    const { title, creator } = this.state;

    this.setState({ loading: true });
    WeaTools.callApi('/api/portal/rankinglist/getSqlTemplates', 'GET', { title, creator }).then((result) => {
      tableStore.getDatas(result.sessionkey, 1);
      this.setState({ loading: false, selectedRowKeys: [] });
    });
  };

  onAdd = () => {
    this.edit.onShow();
  };

  onDelete = (ids) => {
    Modal.confirm({
      title: getLabel(506973, '删除确认'),
      content: getLabel(506974, '确定要删除吗？'),
      onOk: () => {
        WeaTools.callApi('/api/portal/rankinglist/deleteSqlTemplate', 'POST', { ids }).then((result) => {
          this.getSqlTemplates();
        });
      },
    });
  };

  onBatchDelete = () => {
    Modal.confirm({
      title: getLabel(506973, '删除确认'),
      content: getLabel(506975, '确定要删除所选项吗？'),
      onOk: () => {
        const { selectedRowKeys: _keys } = this.state;
        WeaTools.callApi('/api/portal/rankinglist/deleteSqlTemplate', 'POST', { ids: _keys.join(',') }).then((result) => {
          this.getSqlTemplates();
        });
      },
    });
  };

  onShow = () => {
    this.setState({ visible: true });
    this.getSqlTemplates();
  };

  onCancel = () => this.setState({ visible: false, title: '' });
}

export default Content_RankingList_SqlTemplateManage;

class Edit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      loading: false,
      data: {},
    };
  }

  render() {
    const { visible, loading, data } = this.state;
    const { title, rankinglistsql } = data;

    const colProps = { labelCol: { span: 8 }, wrapperCol: { span: 16 } };

    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@1zvevo`}
        visible={visible}
        loading={loading}
        title={getLabel(388015, '编辑sql模板')}
        icon="icon-coms-portal"
        iconBgcolor="#1a57a0"
        style={{ width: 600 }}
        buttons={this.getButtons()}
        onCancel={this.onCancel}
      >
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@297tis`} datas={this.getRightMenus()}>
          <div className="portal-esetting-form-group">
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@tl8x5s`} label={getLabel(33439, '名称')} {...colProps}>
              <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@whup77`} inputType="multilang" isBase64={true} value={title} viewAttr={3} onChange={(value) => this.onChange({ title: value })} />
            </WeaFormItem>
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@uxsxfq`} label={getLabel(28479, 'SQL语句')} {...colProps}>
              <WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@5b1c25`} value={rankinglistsql} minRows={5} onChange={(value) => this.onChange({ rankinglistsql: value })} />
            </WeaFormItem>
          </div>
        </WeaRightMenu>
      </WeaDialog>
    );
  }

  getButtons = () => {
    const buttons = [];
    buttons.push(
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@i9da8o`} type="primary" onClick={this.onSave}>
        {getLabel(30986, '保存')}
      </Button>
    );
    buttons.push(<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@5en8lw`} datas={this.getRightMenus()} />);
    return buttons;
  };

  getRightMenus = () => {
    const rightMenus = [];
    rightMenus.push({ key: '1', icon: <i className="icon-coms-Preservation" />, content: getLabel(30986, '保存'), onClick: this.onSave });
    return rightMenus;
  };

  onChange = (obj) => {
    const { data } = this.state;
    this.setState({ data: Object.assign({}, data, obj) });
  };

  onSave = () => {
    const { data } = this.state;
    const { title } = data;
    if (!title) {
      message.warning(getLabel(15859, '必要信息不完整！'));
    } else {
      WeaTools.callApi('/api/portal/rankinglist/addSqlTemplate', 'POST', { ...data }).then((result) => {
        if (result.api_status) {
          message.success(getLabel(83551, '保存成功！'));
          this.props.getSqlTemplates();
          this.onCancel();
        } else {
          message.error(result.api_errormsg);
        }
      });
    }
  };

  onShow = (id) => {
    if (!!id) {
      this.setState({ visible: true, loading: true });
      WeaTools.callApi('/api/portal/rankinglist/getSqlTemplate', 'GET', { id }).then((result) => {
        this.setState({ loading: false, data: result.data });
      });
    } else {
      this.setState({ visible: true, data: { title: '', rankinglistsql: '' } });
    }
  };

  onCancel = () => {
    this.setState({ visible: false, data: {} });
  };
}
